<template>
	<div class="transaction-monitoring">
		<div class="transaction-box">
			<div class="box-item line">
				<div class="all-num">{{allNum}}</div>
				<span>全部指标</span>
			</div>
			<div class="box-item">
				<div class="all-num unusual-num">{{unusualNum}}</div>
				<span>异动指标</span>
			</div>
		</div>
		<div class="transaction-list">
			<ul>
				<li v-for="(item, index) in transactionData" :key="index">
					<div class="item-title">{{item.name}}</div>
					<span :class="{ 'isUnusual': item.status } ">{{item.status | dataStatus}}</span>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'transaction-monitoring',
		data () {
			return {
				allNum: 15,
				unusualNum: 5,
				transactionData: [
					{
						name: '高德客流',
						status: 1
					},
					{
						name: '高德客流',
						status: 1
					},
					{
						name: '高德客流',
						status: 1
					},
					{
						name: '高德客流',
						status: 1
					},
					{
						name: '高德客流',
						status: 1
					},
					{
						name: '高德客流',
						status: 0
					},
					{
						name: '高德客流',
						status: 0
					},
					{
						name: '高德客流',
						status: 0
					},
					{
						name: '高德客流',
						status: 0
					},
					{
						name: '高德客流',
						status: 0
					},
					{
						name: '高德客流',
						status: 0
					},
					{
						name: '高德客流',
						status: 0
					},
					{
						name: '高德客流',
						status: 0
					}
				]
			}
		},
		filters: {
			dataStatus (status) {
				if (status === 0) {
					return '正常'
				} else if (status === 1) {
					return '异动'
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.transaction-monitoring {
		height: 100%;
		background: @whiteBg;
		padding: 40px;
		overflow: auto;
		.transaction-box {
			width: 100%;
			height: 125px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.07);
			border-radius: 10px;
			margin-bottom: 20px;

			.box-item {
				flex: 1;
				text-align: center;
				position: relative;

				&.line::before {
					content: "";
					display: block;
					height: 40px;
					width: 1px;
					background: #ccc;
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
				}

				.all-num {
					font-size: @font26;
					font-weight: bold;

					&.unusual-num {
						color: @fontRedColor;
					}
				}

				span {
					font-size: @font22;
					color: @greyq;
				}
			}
		}

		.transaction-list {
			ul {
				li {
					font-size: @font26;
					display: flex;
					width: 100%;
					justify-content: space-between;
					align-items: center;
					height: 72px;
					background: #f8f8f8;
					margin-bottom: 20px;
					border-radius: 10px;
					padding: 0 30px;

					.isUnusual {
						color: @fontRedColor;
					}
				}
			}
		}
	}
</style>
